React Lifecycle Methods এবং Hooks

React একটি খুবই জনপ্রিয় লাইব্রেরি যা আপনাকে UI তৈরি করতে সাহায্য করে, এবং এটি Component-based architecture ব্যবহার করে। React-এ অ্যাপ্লিকেশন বা কম্পোনেন্টের বিভিন্ন জীবনচক্র (lifecycle) থাকে, এবং সেই জীবনের বিভিন্ন ধাপগুলোর জন্য আমরা Lifecycle Methods এবং Hooks ব্যবহার করি।

নিচে React Lifecycle Methods এবং Hooks-এর বিস্তারিত ব্যাখ্যা দেওয়া হলো:

React Lifecycle Methods

React কম্পোনেন্টের জীবনের বিভিন্ন পর্যায়ে কার্যকরী হতে পারে, এবং এর জন্য React কিছু Lifecycle Methods প্রদান করে। Class-based Components ব্যবহার করলে, আপনি এই মেথডগুলি ব্যবহার করতে পারবেন।

১. componentDidMount()

• বিবরণ: এটি কম্পোনেন্টটির প্রথমবার DOM-এ রেন্ডার হওয়ার পরে কল হয়। এটি সাধারণত API কল করার জন্য বা অন্য কোনো একটি ইনিশিয়ালাইজেশন কাজের জন্য ব্যবহৃত হয়।
• ব্যবহার: ডেটা লোডিং বা সাবস্ক্রিপশন সেটআপ করতে।

class MyComponent extends React.Component {
  componentDidMount() {
    console.log("Component has mounted");
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

২. componentDidUpdate(prevProps, prevState)

• বিবরণ: এই মেথডটি তখন কল হয় যখন কম্পোনেন্টটির প্রপস বা স্টেট আপডেট হয়। এটি আগের প্রপস বা স্টেটের সাথে বর্তমান প্রপস বা স্টেট তুলনা করতে ব্যবহৃত হয়।
• ব্যবহার: ডেটা পরিবর্তনের পর অন্য কোনো কাজ (যেমন DOM আপডেট) করতে।

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      console.log("Value has changed");
    }
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

৩. componentWillUnmount()

• বিবরণ: এটি কম্পোনেন্টটি DOM থেকে আনমাউন্ট হওয়ার আগে কল হয়। এটি সাধারণত ক্লিনআপের জন্য ব্যবহৃত হয়, যেমন সাবস্ক্রিপশন রিমুভ করা বা টাইমার বন্ধ করা।
• ব্যবহার: API কল বন্ধ করতে বা ইভেন্ট লিসেনার সরাতে।

class MyComponent extends React.Component {
  componentWillUnmount() {
    console.log("Component is being unmounted");
  }

  render() {
    return <div>Goodbye, World!</div>;
  }
}

৪. shouldComponentUpdate(nextProps, nextState)

• বিবরণ: এটি একটি boolean মান রিটার্ন করে এবং React-কে বলে যে কম্পোনেন্টটি পুনরায় রেন্ডার হওয়া উচিত কি না। এটি performance optimization এর জন্য ব্যবহার করা হয়।
• ব্যবহার: যদি আপনি চান যে কিছু পরিস্থিতিতে রেন্ডারিং বন্ধ হোক।

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

React Hooks

React 16.8-এ Hooks চালু হয়েছিল। Hooks মূলত ফাংশনাল কম্পোনেন্টে স্টেট এবং লাইফসাইকেল ফিচার যোগ করতে ব্যবহৃত হয়, যা আগে কেবল ক্লাস কম্পোনেন্টে পাওয়া যেত।

১. useState()

• বিবরণ: এটি একটি ফাংশনাল কম্পোনেন্টে স্টেট সংরক্ষণের জন্য ব্যবহৃত হয়।
• ব্যবহার: স্টেট পরিবর্তন এবং তার মান আপডেট করার জন্য।

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

২. useEffect()

• বিবরণ: এটি কম্পোনেন্টের lifecycle methods এর সমতুল্য, যেমন componentDidMount, componentDidUpdate, এবং componentWillUnmount। এটি সাইড এফেক্ট (যেমন API কল, সাবস্ক্রিপশন) পরিচালনা করতে ব্যবহৃত হয়।
• ব্যবহার: সাইড এফেক্টের জন্য, যেমন ডেটা ফেচিং বা সাবস্ক্রাইব করা।

import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array means it runs only once, similar to componentDidMount

  return <div>{data ? data.name : 'Loading...'}</div>;
}

৩. useContext()

• বিবরণ: এটি একটি হুক যা একটি React Context থেকে মান গ্রহণ করতে ব্যবহৃত হয়।
• ব্যবহার: গ্লোবাল স্টেট পরিচালনা বা থিম সেটিংস শেয়ার করতে।

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function MyComponent() {
  const theme = useContext(ThemeContext);

  return <div className={theme}>Hello, World!</div>;
}

৪. useRef()

• বিবরণ: এটি একটি রেফারেন্স তৈরি করে, যা DOM নোড বা কম্পোনেন্টে সরাসরি অ্যাক্সেসের জন্য ব্যবহৃত হয়। এটি স্টেটের মতো রেন্ডারিং ট্রিগার করে না।
• ব্যবহার: DOM নোডে সরাসরি অ্যাক্সেস পেতে বা স্টোর করা মান ধরে রাখতে।

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

৫. useReducer()

• বিবরণ: এটি জটিল স্টেট লজিকের জন্য ব্যবহৃত হয়, যেখানে স্টেট আপডেট করার জন্য একটি ডিসপ্যাচ ফাংশন ব্যবহৃত হয়। এটি useState এর বিকল্প হিসেবে কাজ করতে পারে।
• ব্যবহার: বৃহত্তর অ্যাপ্লিকেশন বা জটিল স্টেট লজিকের জন্য।

import React, { useReducer } from 'react';

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

সারাংশ

• React Lifecycle Methods ক্লাস-ভিত্তিক কম্পোনেন্টে ব্যবহৃত হয় এবং কম্পোনেন্টের জীবনের বিভিন্ন ধাপে কার্যকরী হয় (যেমন componentDidMount, componentDidUpdate, ইত্যাদি)।
• React Hooks ফাংশনাল কম্পোনেন্টে ব্যবহৃত হয় এবং React এর লাইফসাইকেল এবং স্টেট ম্যানেজমেন্টের জন্য একটি আধুনিক বিকল্প। এটি useState, useEffect, useRef, useReducer, এবং আরও অনেক হুক প্রদান করে।

React Hooks আপনাকে ফাংশনাল কম্পোনেন্টের মাধ্যমে লাইফসাইকেল এবং স্টেট পরিচালনা করতে সক্ষম করে, যা কম্পোনেন্টের মধ্যে ক্লাস ব্যবহারের প্রয়োজনীয়তা হ্রাস করে।